<template>
    <div ref="editor" style="text-align:left"></div>
</template>

<script>
import E from 'wangeditor'
export default {
    data(){
        return {
            editor: '',
        }
    },
    props:['editorContent'],
    mounted() {
        this.editor = new E(this.$refs.editor);
        this.editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',// 文字颜色
            'justify', // 对齐方式
            'undo',  // 撤销
            'redo'  // 重复
        ];
        this.editor.customConfig.zIndex = 100;
        this.editor.customConfig.onchange = (html) => {
            
            this.editor.customConfig.pasteFilterStyle = false
            this.$nextTick(()=>{
                this.$emit('update:editorContent',html);
                this.$emit('update:editorText',this.getSimpleText(html));
            })
        }
        this.editor.create();
        this.editor.txt.html(this.editorContent);
    },
    methods : {
        resetEditor(){
            this.editor.txt.html('');
        },
        updateEditor(data){
            this.editor.txt.html(data);
        },
        chooseEditor(){
            this.$emit('update:editorText',this.getSimpleText(this.editor.txt.html()));
        },
        getSimpleText (html) {
            let msg = html.replace(/<style(([\s\S])*?)<\/style>|<w:(([\s\S])*?)<\/w:(([\s\S])*?)>/g, '').replace(/<[^>]*>|<\/[^>]*>/gm, '').replace(/[ ]|[\r\n]/g,"");//执行替换成空字符
            return msg;
        },
    },
}
</script>

<style>

</style>
